<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--jquery-->
    <script src="/Public/Static/jquery.min.js"></script>
</head>
<style>
    .param{
        width: 300px;
        margin-bottom: 15px;
    }
</style>
<body>
<!-- 主体内容,创建测试数据 -->
    <div class="" style="text-align: center;position: relative">
        <h3>接口测试工具</h3>
        接口地址:<input value="http://{$api_url}/" style="width: 350px;height: 30px" id="api_url"/><span style="position: absolute;top: 50px;right: 315px;">*只支持伪静态模式</span><br><br>
		模块名:<input  style="width: 150px;" id="model_name"/>&nbsp&nbsp&nbsp
		方法名:<input  style="width: 150px;" id="action_name"/><span  style="position: absolute;top: 100px;right: 245px;">*使用'='可实现修改或者删除</span>
		<br><br>
        提交方式:&nbsp&nbspAJAX<input onclick="document.getElementById('re_types').value=1" checked="checked" type="radio" name="re_types">&nbsp&nbsp&nbsp form表单<input onclick="document.getElementById('re_types').value=3" type="radio" name="re_types"><br><br>
        参数名:<input  style="width: 150px;" id="names"/>&nbsp&nbsp&nbsp<button onclick="add()">小文本框</button>&nbsp&nbsp<button onclick="add_text()">大文本框</button>&nbsp&nbsp<button onclick="add_pics()">图片上传</button><br><br>
<!--form表单-->
        <form id="form_id" action='' method='post' enctype="multipart/form-data" target="_blank">
            <input id="re_types" name="array" value="1" style="display: none">
			<!--要提交的参数-->
            <div id="form_input"></div>
			<!--处理要提交的地址并提交-->
            <input onclick="submit_form()" onmouseout="document.getElementById('form_id').setAttribute('action',document.getElementById('api_url').value)" type="button" value="提&nbsp交">
        </form><br>
		<!--返回值显示-->
        <textarea id="textarea" style="height: 350px;width: 800px;">
        </textarea>
    </div>
<!-- 选择接口 -->
<style>
	.select_div{
		margin-left: 30px;
		margin-top: 100px;
		position:absolute;
		top:0px;
		left:45px
	}
	.select{
		width: 150px;
		height: 30px;
		margin-bottom:15px
	}
</style>
	<div class="select_div">
		<div class="model">
			<select id="select_model" class="select" onchange="m_selected(this)">
				<option>请选择模块</option>
				<?php foreach($model as $key=>$val):?>
				<option value="{$key}*{$val}">{$key}</option>
				<?php endforeach;?>
			</select>
		</div>
		<div class="interface">
			<select id="select_action" class="select"  onchange="a_selected(this)">
				<option>请选择方法</option>			
			</select>
		</div>
	</div>
<!--js脚本开始-->
    <script>
		//添加小文本框
        function add() {
            names=document.getElementById("names").value;
            if(!names){
                return false;
            }
            values='';
            HTMLS="<div id='div"+document.getElementById('form_input').getElementsByTagName('div').length+"'>"+names+":<input class='param' name='"+names+"' value='"+values+"'/><input type='button' value='删除' id='"+document.getElementById('form_input').getElementsByTagName('div').length+"' onclick='removenode(this.id)'/></div>";
            document.getElementById("form_input").innerHTML+=HTMLS;
            document.getElementById("names").value="";
            document.getElementById("values").value="";
        }
		//添加大文本框
        function add_text(){
            names=document.getElementById("names").value;
            if(!names){
                return false;
            }
            values='';
            HTMLS="<div id='div"+document.getElementById('form_input').getElementsByTagName('div').length+"'>"+names+":<textarea style='height: 100px' class='param' name='"+names+"'></textarea><input type='button' value='删除' id='"+document.getElementById('form_input').getElementsByTagName('div').length+"' onclick='removenode(this.id)'/></div>";
            document.getElementById("form_input").innerHTML+=HTMLS;
            document.getElementById("names").value="";
            document.getElementById("values").value="";
        }
		//添加图片上传
        function add_pics() {
            names=document.getElementById("names").value;
            if(!names){
                return false;
            }
            values='';
            HTMLS="<div id='div"+document.getElementById('form_input').getElementsByTagName('div').length+"'>"+names+":<input class='param' type='file' multiple='multiple' name='"+names+"' value='"+values+"'/><input type='button' value='删除' id='"+document.getElementById('form_input').getElementsByTagName('div').length+"' onclick='removenode(this.id)'/></div>";
            document.getElementById("form_input").innerHTML+=HTMLS;
            document.getElementById("names").value="";
            document.getElementById("values").value="";
        }
//提交form表单,先向Apitest接口提交一份缓存数据再提交给真正的接口地址
        function submit_form() {
		    var url=document.getElementById("api_url").value;
			//提交缓存数据
			var model_name=document.getElementById('model_name').value;
			var action_name=document.getElementById('action_name').value;
			var form_input=document.getElementById('form_input').innerHTML;
			//获取url上的模块名和方法名
			var m_a=url.substr(url.indexOf('com/')+4).split('/');
			var url_model=m_a[0]?m_a[0]:'---';
			var url_action=m_a[1]?m_a[1]:'---';
			if(model_name && action_name){
				$.ajax({
					url: "{:U('Apitest/index')}",
					type : "POST", //提交方式
					data: {
					model_name:model_name,
					action_name:action_name,
					form_input:form_input,
					url_model:url_model,
					url_action:url_action
					},
					//要求服务器返回的数据格式，不指定自动判断
					dataType:'text',
					//发送到服务器的数据类型，默认true,转换为对象格式，
					processData:true,
					//发送到服务器数据的编码类型，默认表单类型
					contentType:"application/x-www-form-urlencoded",
					success: function(re){
						console.log(re);
					}});
			}
			//提交接口数据
				if(document.getElementById('re_types').value==3){
					document.getElementById("form_id").submit();//直接提交
					return;
				}
				var data = new FormData(document.getElementById("form_id"));
				$.ajax({
					url: url,
					type : "POST", //提交方式
					data: data,
					processData:false,
					contentType:false,
					success: function(re){
                        var json=re;
                        if(typeof re=='string'){
                            try {
                                json=eval('(' + re + ')');
                            } catch(e) {
                                document.getElementById("textarea").innerHTML=re;return;
                            }
                        }
                        document.getElementById("textarea").innerHTML=JSON.stringify(json, null,"\t");
					}});
        }
		//删除节点
        function removenode(id) {
            document.getElementById('form_input').removeChild(document.getElementById('div'+id))
        }
//选择模块后
		function m_selected(obj){
		//重置url
		    var url=document.getElementById("api_url");
			url.value=url.value.substr(0,url.value.indexOf('com/')+4);
			var param=obj.value.split('*');
            if(param[1]){
                //选择了具体的模块
                // 填写url
				url.value+=param[1];
				//填写模块名
				document.getElementById("model_name").value=param[0];
				//清空方法名
                document.getElementById("action_name").value='';
            }else{
                //没有选择具体的模块
                // 清空模块名和方法名
				document.getElementById("model_name").value='';
				document.getElementById("action_name").value='';
            }
            //清空参数
            document.getElementById("form_input").innerHTML='';
            $.ajax({
					url: "{:U('Apitest/index')}",
					type : "POST", //提交方式
					data: {model:param[0]},
					success: function(re){
					var data=JSON.parse(re);
					var html="<option>请选择方法</option>";
						for(var key in data){
							html+='<option value="'+key+'*'+data[key]+'">'+key+'</option>';
						}
					document.getElementById("select_action").innerHTML=html;
					}});
		}
//选择方法后
		function a_selected(obj){
		//获取当前模块信息
			var model=document.getElementById("select_model").value.split('*');
			var a_model=model[0];
		//重置url
			var param=obj.value.split('*');
			var url=document.getElementById("api_url");
		    url.value=url.value.substr(0,url.value.indexOf('com/')+4)+model[1];
			if(param[1]){
				//填写url
				url.value+='/'+param[1];
				//填写方法名
				document.getElementById("action_name").value=param[0];
			}else{
				//方法名
				document.getElementById("action_name").value='';
				//清空参数
				document.getElementById("form_input").innerHTML='';
			}
			if(a_model && param[0]){
				$.ajax({
					url: "{:U('Apitest/index')}",
					type : "POST", //提交方式
					data: {a_model:a_model,action:param[0]},
					success: function(re){
						document.getElementById("form_input").innerHTML=re;							
					}});
			}
		}
    </script>
</body>
</html>